import React from 'react'
import {Pagination, Spin} from 'antd'
import BlockList from './blockList'
import CorNoData from './noData'
import styles from './cms.less'

/**
 * props示例：
 *
 * {
    loading: loading,//boolean
    blockListParam:{
      itemInfo:[
        {
          left: {
            dataIndex: 'projectName',
          },
          right: {
            dataIndex: 'status',
            render: text => {
              if(text == 1){
                return <span style={{color:'green'}}>进行中</span>
              }else if(text == 2){
                return <span style={{color:'red'}}>已完成</span>
              }
            }
          }
        },
        {
          left: {
            dataIndex: 'type',
          },
          right: {
            dataIndex: 'createdOn',
          }
        }
      ],
      list:[],
    },
    pageParam: {
      current: pageIndex,
      pageSize: pageSize,
      onShowSizeChange: (current, pageSize) => {
        console.log('Current: ', current, '; PageSize: ', pageSize);
      },
      onChange: (current) => {
        console.log('Current: ', current);
      }
    }
  }
 *
 */

//表格组件
const BlockListView = (props) => {
  const { pageParam, blockListParam, loading, styleShow} = props;

  const pagination = {
    total: blockListParam.total,
    pageSize: pageParam.pageSize,
    pageSizeOptions: ['1', '10', '20', '30', '40'],
    showTotal: total => `共 ${total} 条`,
    showSizeChanger: true,
    showQuickJumper: true,
    onShowSizeChange: pageParam.onShowSizeChange,
    onChange: pageParam.onChange,
    size: "small"
  };//styles.paginationBox
  if (pageParam.current) {
    pagination.current = pageParam.current;
  }
  return <div style={{marginTop: styleShow ? '40px' : ''}}>
    <Spin spinning={loading}>
      <BlockList {...blockListParam}/>
      {
        (blockListParam.list && blockListParam.list.length > 0) ?
          <div className={styles.paginationBox} style={{border:'0px', marginTop:'20px'}}>
            <Pagination {...pagination}/>
          </div>
          : <CorNoData/>
      }
    </Spin>
  </div>
};

export default BlockListView
